<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { get_swiper, get_getbann } from '../../utils/api';
// const swiperlist:any = [];
const swiperlist: any = reactive({
    list: []
});
// const listswiper:any = [];
const listswiper: any = reactive({
    list: []
});
onMounted(async () => {
    let res = await get_swiper();
    if (res.data.code === 200) {
        swiperlist.list = res.data.data;
    }

    let bann = await get_getbann();
    if (bann.data.code === 200) {
        listswiper.list = bann.data.data;
    }
});
const cons = ref();
const leftswiper = ref();
const rightswiper = ref();

const swiperleft = () => {
    cons.value.style.transform = `translateX(-${20}%)`;
    cons.value.style.transition = 'all .5s';
    leftswiper.value.style = "display:none;";
    rightswiper.value.style = "display:flex;";

   


};

const swiperright = () => {
    cons.value.style.transform = `translateX(0px)`;
    cons.value.style.transition = 'all .5s';
    rightswiper.value.style = "display:none;";
    leftswiper.value.style = "display:flex;";
   
};


</script>

<template>
        <div class="carousel-slides">
        <div class="block text-center" m="t-4">
            <el-carousel trigger="click" height="260px">
                <el-carousel-item v-for="(item, index) in swiperlist.list" :key="index">
                    <img :src="item.image" alt="" :lazy="true">
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
    <div class="swiper-list" ref="con">
        <div class="swiper-witid" :style="{ width: (185 + 20) * listswiper.list.length + 'px' }" ref="cons">
            <div class="swiper-list-scroll" v-for="(i, x) in listswiper.list" :key="x" ref="leftimg">
                <img :src="i.image" alt="">
            </div>
        </div>
        <div class="swiper-left" @click="swiperleft()" ref="leftswiper">
            <p>
                <IconFont type="icon-jinru" />
            </p>
        </div>
        <div class="swiper-right" @click="swiperright()" ref="rightswiper">
            <p>
                <IconFont type="icon-fanhui" />
            </p>
        </div>
    </div>
   
</template>

<style scoped>
.carousel-slides {
    width: 100%;
    height: 260px;
    /* padding-left: 100px; */
    border-radius: 10px;
    overflow: hidden;
}

.carousel-slides img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.swiper-list {
    width: 100%;
    height: 150px;
    padding-top: 50px;
    overflow: hidden;
    position: relative;
}

.swiper-witid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.swiper-list-scroll {
    width: 185px;
    height: 100px;
    border-radius: 15px;
}

.swiper-list-scroll img {
    display: inline-block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 0.5s;
    border-radius: 3px;
}

.swiper-list-scroll img:hover {
    transition: all 0.3s;
    margin-top: -5px;
    cursor: pointer;
}

.swiper-left {
    width: 40px;
    height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 80px;
    border-radius: 50px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.swiper-right {
    width: 40px;
    height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    top: 80px;
    border-radius: 50px;
    display: none;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.swiper-right:hover {
    background-color: #1261FF;
    color: #fff;
}

.swiper-right p {

    font-size: 20px;
    cursor: pointer;
}

.swiper-left p {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-left:hover {
    background-color: #1261FF;
    color: #fff;
}
</style>
